<template>
<div class="panel">
    
    <div class="panel-header">
        <div class="bl"></div>
        <div class="title">联系方式</div>
        <div class="more">
            <el-button type="primary" size="mini" @click="appendContact">添加</el-button>
        </div>
    </div>

    <div class="panel-body">
        <el-table :data="contactList" border>
            <el-table-column label="角色" prop="role_type" align="center" width="120">
                <template slot-scope="scope">
                    <el-link type="primary" @click="showEditRole(scope.row)">{{ scope.row.role_type }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="类型" prop="tag" align="center" width="120"></el-table-column>
            <el-table-column label="联系方式" prop="contact">
                <template slot-scope="scope">
                    <el-link type="primary" @click="copyIt(scope.row)">{{ scope.row.contact }}</el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <contact-append ref="contactAppendRef"></contact-append>
    <contact-role-update ref="contactRoleUpdateRef"></contact-role-update>
</div>
</template>

<script>
import contactAppend from './contact-append.vue';
import contactRoleUpdate from './contact-role-update.vue'

export default {
    props: {
        customer: {
            type: Object,
            default: function() {
                return {};
            }
        },
        contactList: {
            type: Array,
            default: []
        }
    },
    components: {
        contactAppend,
        contactRoleUpdate
    },
    methods: {
        showEditRole(row) {
            this.$refs['contactRoleUpdateRef'].showDialog(row);
        },
        appendContact() {
            this.$refs['contactAppendRef'].showDialog(this.customer.id);
        },
        // 移除联系方式
        removeContact(index) {
            this.$confirm('确认删除此联系方式', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.contactList.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        copyIt(row) {
            let that = this;
            // 复制到剪切板
            this.$copyText(row.contact).then(function(e) {
                that.$message({
                    type: 'success',
                    message: '复制成功!'
                });
            }, function(e) {
                that.$message({
                    type: 'error',
                    message: '复制失败!'
                });
            });
        }
    }
}
</script>
